<template>
  <div class="title-box">
    <div class="title-text">
      <span>{{title}}</span>
      <slot name="subTitle"></slot>
    </div>
    <div class="title-other">
      <!--TAB——START-->
      <ul class="tab-group" v-if="tabGroup.length>1">
        <li class="tab-item" :class="tabActive === key?'tab-item-active':null" v-for="(item, key) in tabGroup" :key="key" @click="handleClickTabItem(item, key)">{{item.label}}</li>
      </ul>
      <!--TAB——END-->

      <!--SHOW-CONTENT——START-->
      <div class="show-content"><slot name="other"></slot></div>
      <!--SHOW-CONTENT——END-->
    </div>
  </div>
</template>
<script>
export default {
  name: 'titleModule',
  title: '以及标题组件',
  props: {
    title: {
      type: String,
      required: true,
      default: '一级标题'
    },
    tabGroup: {
      type: Array,
      default: () => [
        { label: '选项一', value: 1 }
      ]
    },
    tabActive: {
      type: Number,
      default: 1
    }
  },
  methods: {
    handleClickTabItem (item, index) {
      this.$emit('tab-click', item, index)
    }
  },
  mounted () {}
}
</script>
<style scoped lang="scss">
.title-box{
  width: 450px;
  height: 40px;
  background: url("~@/assets/images/title-bg.png")50% 50% no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px 0 35px;
  .title-text{
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }
  .title-other{
    // TAB-START
    .tab-group{
      display: flex;
      .tab-item{
        height: 40px;
        line-height: 40px;
        padding: 0 6px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #7BCAFF;
        cursor: pointer;
      }
      .tab-item-active{
        color: #00FFC6;
        border-bottom: 2px solid #00FFC6;
        transition: .1s all;
      }
    }
    // TAB-END
  }
}
</style>
